<template>
  <div class="container">
    <div class="export-header">
      <el-button  icon="el-icon-edit" type="primary" size='medium' @click="exportClick">导出</el-button>
    </div>
    <div class="input_modal">
      <div class="input-item">
        <span>订单号：</span>
        <el-input v-model="param.orderId" placeholder="请输入内容" class="proName" @keyup.enter.native="search"></el-input>
      </div>
      <div class="input-item">
        <span>商品名称：</span>
        <el-input v-model="param.goodsName" placeholder="请输入内容" class="proName" @keyup.enter.native="search"></el-input>
      </div>
      <div class="input-item">
        <span>商品类别：</span>
        <el-select v-model='param.orderType' placeholder='-请选择-' @change="getList" style="height: 30px;  line-height: 30px;width:200px;">
          <el-option label="全部" value="" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option v-for="(item,index) in typeArr" :key="index" :label="item.name" :value="item.value" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>商品分类：</span>
        <el-select v-model="param.categoryName" placeholder="请选择">
            <el-option label="全部" value="" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
          <el-option v-for="(item,index) in sortArr" :key="index" :label="item.categoryName" :value="item.categoryName" style="height: 30px;  line-height: 30px;width:200px;"></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>品牌名：</span>
        <el-select v-model="param.brandName" placeholder="请选择">
            <el-option
            v-for="item in brandArr"
            :key="item.id"
            :label="item.brandName"
            :value="item.brandName">
            </el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>买家手机号：</span>
        <el-input v-model="param.mobile" placeholder="请输入内容" class="proName" @keyup.enter.native="search"></el-input>
      </div>
      <div class="input-item">
        <span>交易时间：</span>
        <el-date-picker
            size="mini"
            v-model="dateArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="input-item">
        <span>订单状态：</span>
        <el-checkbox  v-model="param.isWait">待付款</el-checkbox>
        <el-checkbox v-model="param.isCancel">取消付款</el-checkbox>
        <el-checkbox v-model="param.isPay">已完成</el-checkbox>
        <el-checkbox v-model="param.isNotUse">待使用</el-checkbox>
        <el-checkbox v-model="param.isUse">已使用</el-checkbox>
        <el-checkbox  v-model="param.isExpire">已过期</el-checkbox>
        <el-button icon="el-icon-search" type="primary" size="medium" @click="getList">查询</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table :row-key="getRowKeys" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" :border='true'>
        <el-table-column
          fixed="left"
          type="selection"
          min-width='100'
          :reserve-selection="true"
          align="center"
        ></el-table-column> 
        <el-table-column :formatter="formatter" prop="orderId" label="订单号"></el-table-column>
        <el-table-column :formatter="formatter" prop="status" label="订单状态">
           <template slot-scope="scope">
             {{scope.row.status == 'cancel'?'取消付款':returnState(scope.row.status)}}
           </template>
        </el-table-column>
        <el-table-column :formatter="formatter" prop="esPayOrderDetailDTO[0].goodsName" label="商品名称"></el-table-column>
        <el-table-column :formatter="formatter" prop="totalPrice" label="金额"></el-table-column>
        <el-table-column :formatter="formatter" prop="payType" label="付款方式">
           <template slot-scope="scope">
             {{returnPay(scope.row.payType)}}
           </template>
        </el-table-column>
        <el-table-column  prop="payPrice" label="微信支付金额"></el-table-column>
        <el-table-column :formatter="formatter" prop="esPayOrderDetailDTO[0].categoryName" label="商品类别">
          <template slot-scope="scope">
             {{returnName(scope.row.esPayOrderDetailDTO[0].goodsType)}}
           </template>
          
        </el-table-column>
        <el-table-column :formatter="formatter" prop="esPayOrderDetailDTO[0].categoryName" label="商品分类"></el-table-column>
        <el-table-column :formatter="formatter" prop="esPayOrderDetailDTO[0].brandName" label="品牌名"></el-table-column>
        <el-table-column :formatter="formatter" prop="userName" label="买家手机/定制账号"></el-table-column>
        <el-table-column :formatter="formatter" prop="gmtCreated" label="交易时间"></el-table-column>
        <el-table-column width="120" prop="" label="操作">
          <template slot-scope="scope">
            <el-button @click="linkTo('orderDetail',scope.row.id)" type="primary" size="mini">查看</el-button>
            <el-button v-if="scope.row.status == 'pay'&&!scope.row.isRefund" @click="refund(scope.row.orderId)" type="primary" size="mini">退款</el-button>
            <el-button v-if="scope.row.status == 'pay'&&scope.row.isRefund" type="primary" size="mini">已退款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="param.pageIndex" :page-size="param.pageSize" :page-sizes='[10,20,30,40]' layout="total, sizes, prev, pager, next, jumper" :total="pageCount">
      </el-pagination>
    </div>
    <el-dialog title="添加/编辑品牌" :visible.sync="dialogVisible" width="30%">
      <div class="tag-head">
        <el-form :model="user" :rules="rules" ref="user" label-width="120px" class="">
          <el-form-item label="品牌名" prop="papersName">
            <el-input v-model="user.brandName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handSave('user')" type="primary">确 定</el-button>
        <el-button style="margin-right:30%" type="primary" @click="dialogVisible = false">返 回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      tableData: [],
      storeName:'',
      dialogVisible:false,
      pageCount: null,
      pageSize: 10,
      loading: true,
      brandId: null,
      user:{
          id:'',
          brandName:''
      },
      brandArr:[],
      sortArr:[],
      dateArr:[],
      brandName:'',
      categoryName:'',
      goodsName:'',
      isCancel:'',
      isExpire:'',
      isNotUse:'',
      isPay:'',
      isUse:'',
      isWait:'',
      mobile:'',
      orderId:'',
      orderType:'',
      userId:'',
      param:{
        "beginDate": '',
        "brandName": '',
        "categoryName": '',
        "endDate":'',
        "goodsName":'',
        "isCancel":'',
        "isExpire":'',
        "isNotUse": '',
        "isPay":'',
        "isUse": '',
        "isWait":'',
        "mobile":'',
        "orderId": '',
        "orderType": '',
        "pageIndex": 1,
        "pageSize":10,
        "userId":''
      },
      typeArr:[
        {
            name:'实体商品',
            value:'real'
        },
         {
            name:'自营电子券',
            value:'virtual'
        },
        {
            name:'第三方电子券',
            value:'third'
        }
      ],
      statusArr:[
        {
          name:'已完成',
          value:'finish'
        },
        {
          name:'已使用',
          value:'use'
        },
        {
          name:'未使用',
          value:'notuse'
        },
        {
          name:'已过期',
          value:'expire'
        },
        {
          name:'已支付',
          value:'pay'
        },
        {
          name:'待支付',
          value:'wait'
        },
        {
          name:'已取消',
          value:'cancel'
        },
      ],
      rules:{

      },
      payType:{
        'weixin':'微信支付',
        'coins':'余额',
        'coupon':'福利卡券'
      },
      ids:[],
      selectVal:[]
    };
  },
  mounted() {
    if(this.$router.currentRoute.query.pageIndex){
      this.param = JSON.parse(this.$router.currentRoute.query.pageIndex)
    }
    this.getSort()
    this.getList();
    this.getBrandList()
  },
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    handleSelectionChange(val){
      this.selectVal = val
      this.selectVal.map(item=>{
        this.ids.push(item.id)
      })
    },
    returnName(val){
          let str;
          this.typeArr.map(item=>{
              if(item.value == val){
                  str = item.name
              }
          })
          return str
      },
    exportClick(){
      this.dateArr = this.dateArr?this.dateArr:[]
      if(this.dateArr.length){
          this.param.beginDate = this.dateArr[0]
          this.param.endDate = this.dateArr[1]
      }else{
        this.param.beginDate = ''
        this.param.endDate = ''
        this.dateArr = []
      }
       let param = this.param
      let obj = {
        "beginDate": param.beginDate,
        "brandName": param.brandName,
        "categoryName": param.categoryName,
        "endDate": param.endDate,
        "goodsName": param.goodsName,
        "ids":this.ids,
        "isAll":this.ids.length?'n':'y',
        "isCancel":param.isCancel?'y':'',
        "isExpire": param.isExpire?'y':'',
        "isNotUse":param.isNotUse?'y':'',
        "isPay": param.isPay?'y':'',
        "isUse": param.isUse?'y':'',
        "isWait": param.isWait?'y':'',
        "mobile":param.mobile,
        "orderId": param.orderId,
        "orderType": param.orderType
      }
      for (let item in obj) {
        if (!obj[item] && obj[item] !== false) {
          delete obj[item]
        }
      }
      // obj =  Object.assign(obj,this.param)
      let sessionId = sessionStorage.getItem('sessionId');
      let url = `${CONSTANT.URL.LIST.orderExport}?sessionId=${sessionId}`;
       common.post1(url, JSON.stringify(obj), res => {
         var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
          blob = URL.createObjectURL(blob)
          var fileName = "订单.xlsx"
          let link = document.createElement('a')
          link.href = blob
          link.download = fileName
          link.click()
          link.remove()
      });
    },
    returnPay(obj){
      let arr = [],
          arr1 = obj.split(',')
      arr1.map(item=>{
        arr.push(this.payType[item])
      })
      return arr.length?arr.join(','):'--'
    },
    returnState(state){
      let str;
      this.statusArr.map(item=>{
        if(item.value == state){
          str = item.name
        }
      })
      return str||state
    },
    getSort: function() {
        let url = CONSTANT.URL.LIST.findEsCategoryByPage;
        let data = {
            pageIndex: 1,
            pageSize:1000
        };
        this.loading = true;
        common.requestAjax(url, JSON.stringify(data), null, res => {
            let data = res.data;
            this.sortArr = data.bussData;
        });
      },
    linkTo(path,id){
        this.$router.push(path+'?id='+id+'&pageIndex='+JSON.stringify(this.param))
    },
    getBrandList: function() {
      let url = CONSTANT.URL.LIST.findEsBrandByPage;
      let data = {
        pageIndex:1,
        pageSize: 1000
      };
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data;
        this.brandArr = data.bussData;
      });
    },
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    addBtn(){
        this.$router.push('/storeEdit?pageIndex='+JSON.stringify(this.param))
    },        
    editBtn(obj){
        this.user = {
            id:obj.id,
            brandName:obj.brandName
        }
        this.dialogVisible = true
    },
    getList: function() {
      this.dateArr = this.dateArr?this.dateArr:[]
      if(this.dateArr.length){
          this.param.beginDate = this.dateArr[0]
          this.param.endDate = this.dateArr[1]
      }else{
        this.param.beginDate = ''
        this.param.endDate = ''
        this.dateArr = []
      }
      let url = CONSTANT.URL.LIST.findEsPayOrderByPage;
      let data = {
        "beginDate": this.param.beginDate,
        "brandName": this.param.brandName,
        "categoryName": this.param.categoryName,
        "endDate": this.param.endDate,
        "goodsName":this.param.goodsName,
        "isCancel":this.param.isCancel?'y':'',
        "isExpire":this.param.isExpire?'y':'',
        "isNotUse": this.param.isNotUse?'y':'',
        "isPay": this.param.isPay?'y':'',
        "isUse": this.param.isUse?'y':'',
        "isWait":this.param.isWait?'y':'',
        "mobile":this.param.mobile,
        "orderId": this.param.orderId,
        "orderType": this.param.orderType,
        "pageIndex": this.param.pageIndex,
        "pageSize":this.param.pageSize,
        "userId": this.param.userId
      };
      this.loading = true;
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data;
        this.tableData = data.bussData;
        this.pageCount = data.count;
      });
    },
    refund:function(id) {
        this.$confirm('是否确定退款?', '提示', {           
            confirmButtonText: '确定',           
            cancelButtonText: '取消',           
            type: 'warning'         
        }).then(() => {           
            let  url = CONSTANT.URL.LIST.orderRefund;
            common.requestAjax(url,null,{orderIdr:id},(res)=>{
                if(res.status == 200){
                    this.$message({
                        type:'success',
                        message:'退款成功!'
                    });
                    this.getList();
                }
                else{
                    this.$message({
                        type:'warning',
                        message:res.msg
                    })
                }
            })      
        }).catch(() => {           
            this.$message({             
                type: 'info',             
                message: '已取消删除'           
            });                   
        });    
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.param.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.param.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.param.pageIndex = val;
      this.getList();
    }
  }
};
</script>
